/*
 * @Author: shiguang
 * @Date: 2023-04-25 10:46:45
 * @LastEditors: liangliang
 * @LastEditTime: 2023-07-25 14:38:53
 * @Description: App
 */
import React, { Suspense } from 'react';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import {
    RouterProvider,
    RouterProviderProps,
    createBrowserRouter,
} from 'react-router-dom';
// import { getRouter } from './config/router/createRouter';
import './g.scss';
import './App.css';
import CKBLayout from './common/CKBLayout';
import ContainerTabs from './common/ContainerTabs';
import routeList, { ROUTER_BASENAME } from './config/router';

const createRouter = (): RouterProviderProps['router'] => {
    return createBrowserRouter(
        routeList.map((item) => {
            const Comp = item.component;
            return {
                element: (() => {
                    if (item.showLayout === false) {
                        return (
                            <Suspense fallback={<div>Loading...</div>}>
                                {Comp && <Comp />}
                            </Suspense>
                        );
                    }
                    return (
                        <CKBLayout title={item.title}>
                            <ContainerTabs />
                            <Suspense fallback={<div>Loading...</div>}>
                                {Comp && <Comp />}
                            </Suspense>
                        </CKBLayout>
                    );
                })(),
                path: item.path,
                errorElement: <div>fref</div>,
            };
        }),
        {
            basename: ROUTER_BASENAME,
        }
    );
};

export const router = createRouter();

export const getRouter = () => {
    return router;
};

function App() {
    return (
        <div className="App">
            <ConfigProvider
                locale={zhCN}
                theme={{
                    token: {
                        colorPrimary: '#1890ff',
                    },
                }}
            >
                <RouterProvider
                    router={router}
                    fallbackElement={<div>fallbackElement</div>}
                />
            </ConfigProvider>
        </div>
    );
}

export default App;
